<template>
    <div class="app-container">
        <div style="margin-top: 10px;">
            <h2>当前选择影片：{{ movieName }}--{{ last }}分钟</h2>
        </div>

        <div class="block">
            <span class="demonstration"></span>
            <el-date-picker v-model="selectDate" type="date" :picker-options="pickerOptions" placeholder="选择日期"
                @change="checkHallId" style="margin-left: 10px;width:180px">
            </el-date-picker>
            <el-select v-model="currentSelectHallId" placeholder="选择影厅" style="margin-left:10px;width:180px"
                @change="checkDate">
                <el-option v-for="item in hallList" :key="item.id" :value="item.id" :label="item.hallName"
                    :disabled="item.disabled">
                </el-option>
            </el-select>
            <el-button style="margin-left: 10px;" type="primary" @click="ControlDialogFormVisible">新增</el-button>
            <el-button style="margin-left: 10px;" type="success" @click="toArrangeCalendar">排片日历</el-button>
        </div>

        <div style="margin-left: 10px;margin-top: 10px;">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="场次号" width="auto">
                </el-table-column>
                <el-table-column prop="startTime" label="开始时间" width="auto">
                </el-table-column>
                <el-table-column prop="endTime" label="结束时间" width="auto">
                </el-table-column>
                <el-table-column prop="price" label="票价" width="auto">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="150">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text">撤销</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog title="新增场次" :visible.sync="dialogFormVisible">
            <el-form :model="arrangeData">
                <el-form-item label="影片名" label-width="120px">
                    {{ this.movieName }}
                </el-form-item>

                <el-form-item label="开始时间" label-width="120px">
                    <el-time-picker v-model="arrangeData.startTime" :picker-options="{
                        selectableRange: '00:30:00-23:30:00'
                    }" placeholder="选择影片开场时间" format="HH:mm" @change="getEndTime">
                    </el-time-picker>
                </el-form-item>

                <el-form-item label="结束时间" label-width="120px">
                    <el-time-picker v-model="arrangeData.endTime" placeholder="根据影片时长自动填充" format="HH:mm" readonly>
                    </el-time-picker>
                </el-form-item>

                <el-form-item label="票价(元)" label-width="120px">
                    <el-input-number v-model="arrangeData.price" :min="1" :max="9999" label="描述文字"></el-input-number>
                </el-form-item>

            </el-form>
            <div style="margin-left: 120px;">
                <el-button type="primary" @click="subData">确 定</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>
  

  
<script>
import { getTableData, getHallList, addMovieArrange, removeMovieArrange } from '@/api/movieArrange'
import { getToken } from '@/utils/auth'
import { formateDate } from "@/utils/index"
export default {
    data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now()
                }
            },
            hallList: [],
            currentSelectHallId: '',
            tableData: [],
            selectDate: '',
            movieName: this.$route.query.movieName,
            movieId: this.$route.query.id,
            last: this.$route.query.last,
            dialogFormVisible: false,
            arrangeData: {
                movieName: this.$route.query.movieName,
                movieHallId: '',
                startTime: '',
                endTime: '',
                price: ''
            },
            target: ''
        }
    },
    methods: {
        toArrangeCalendar() {
            this.$router.push('/movieArrange/arrangeCalendar')
        },
        addTimeList() {

        },
        showTimeList() {
            // this.timeList.splice(-1, 1)
            console.log(new Date())
        },
        checkDate(currentSelectHallId) {
            if (this.selectDate == '') {
                this.$message({
                    message: '选择日期以获取数据',
                    type: 'warning'
                });
            } else {
                this.getSelectHallArrangeInfo()
            }
        },
        checkHallId() {
            if (this.currentSelectHallId != '') {
                this.getSelectHallArrangeInfo()
            }
        },
        getHallList() {
            getHallList(JSON.parse(sessionStorage.getItem("loginUser")), getToken()).then(res => {
                this.hallList = res.result
            })
        },
        getSelectHallArrangeInfo() {
            if (this.selectDate != '' || this.selectDate != null) {
                let year = this.selectDate.getFullYear()
                let month = this.selectDate.getMonth() + 1
                let day = this.selectDate.getDate()
                this.target = year + '-' + month + '-' + day
                getTableData(this.movieName, this.currentSelectHallId, this.target, getToken()).then(res => {
                    this.tableData = res.result
                    for (var i = 0; i < this.tableData.length; i++) {
                        this.tableData[i].startTime = new Date(this.tableData[i].startTime)
                        this.tableData[i].startTime = formateDate(this.tableData[i].startTime)
                        this.tableData[i].endTime = new Date(this.tableData[i].endTime)
                        this.tableData[i].endTime = formateDate(this.tableData[i].endTime)
                    }

                })
                
            }
        },
        ControlDialogFormVisible() {
            if (this.selectDate == '' || this.currentSelectHallId == '' || this.selectDate == null) {
                this.$message({
                    message: '请先补充日期和影厅信息',
                    type: 'warning'
                });
            } else {
                this.dialogFormVisible = true
            }
        },
        getEndTime() {
            if (this.arrangeData.startTime != null) {
                let hm = this.arrangeData.startTime.getHours() + ':' + this.arrangeData.startTime.getMinutes()
                let tempSelectDate = this.selectDate
                tempSelectDate = tempSelectDate.getFullYear() + '-'
                    + (tempSelectDate.getMonth() + 1) + '-'
                    + tempSelectDate.getDate() + ' '
                this.arrangeData.startTime = tempSelectDate + hm
                this.arrangeData.startTime = new Date(this.arrangeData.startTime)
                let tempEndTime = this.arrangeData.startTime
                tempEndTime = tempEndTime.getFullYear() + '-'
                    + (tempEndTime.getMonth() + 1) + '-'
                    + tempEndTime.getDate() + ' '
                    + tempEndTime.getHours() + ':'
                    + tempEndTime.getMinutes()
                console.log("tempEndTime" + tempEndTime)
                tempEndTime = Date.parse(new Date(tempEndTime)) / 1000
                tempEndTime += this.last * 60;
                this.arrangeData.endTime = new Date(parseInt(tempEndTime) * 1000)
            }
        },
        subData() {
            this.arrangeData.movieHallId = this.currentSelectHallId
            this.arrangeData.startTime  = new Date(this.arrangeData.startTime+'GMT')
            this.arrangeData.endTime  = new Date(this.arrangeData.endTime+'GMT')
            if (this.arrangeData.startTime != null && this.arrangeData.startTime != '') {
                addMovieArrange(this.arrangeData, getToken()).then(res => {
                    this.$message.success(res.message)
                    if(res.message == '保存成功'){
                        this.reloadData()
                        this.arrangeData.startTime=''
                        this.arrangeData.endTime=''
                    }
                })
                this.dialogFormVisible = false
                
            } else {
                this.$message({
                    message: '请填写所有数据',
                    type: 'warning'
                });
            }
            
        },
        reloadData() {
            getTableData(this.movieName, this.currentSelectHallId, this.target, getToken()).then(res => {
                this.tableData = res.result
                for (var i = 0; i < this.tableData.length; i++) {
                    this.tableData[i].startTime = new Date(this.tableData[i].startTime)
                    this.tableData[i].startTime = formateDate(this.tableData[i].startTime)
                    this.tableData[i].endTime = new Date(this.tableData[i].endTime)
                    this.tableData[i].endTime = formateDate(this.tableData[i].endTime)
                }

            })
        },
        handleClick(data) {
            this.delConfirm().then(() => {
                this.loading++
                removeMovieArrange(data.id, getToken()).then(res => {
                    this.$message.success(res.message)
                    this.reloadData()
                }).catch(e => console.log(e)).finally(() => this.loading--)
            }).catch(e => console.log(e))
        }


    },
    mounted() {
        this.getHallList()
    }
}
</script>